<template>
    <div>
        <wl-content-top :line="true">
            <template slot="header">
                车辆：<Button  @click="selectCarsAction">请选择企业与车辆</Button>&nbsp;
                <Button type="primary" @click="selects">搜索</Button>&nbsp;
                <Button type="primary" @click="exportData"><Icon type="ios-download-outline"></Icon>导出</Button>
            </template>
            <template slot="body">
                <Table border :columns="tableHead" :data="data1"></Table>
                <Row type="flex" justify="end" class="mt20 mr20">
                    <Col>
                        <Page :total="pageOptions.totalRecord" show-total @on-change="pageChange"/>
                    </Col>
                </Row>
            </template>
        </wl-content-top>
        <Modal
                v-model="modal1"
                title="请选择企业与车辆"
                @on-ok="okAdd"
                @on-cancel="cancel">
<!--           <Button @click="focus">3333</Button>-->
            <Row>
                <Col span="12" style="padding-right:10px">
                    <Select v-model="model11" filterable @on-change="focus">
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
            </Row>
            <Tree :data="data2" show-checkbox @on-check-change="onCheckChange"></Tree>
        </Modal>
    </div>
</template>

<script>
import WlContentTop from '@/components/wl-content-top'
import { vehicleReport, unit, vehicleSelect, exportData } from '@/api/platform'

export default {
  components: {
    WlContentTop
  },
  data () {
    return {
      select: '',
      cityList: [],
      tableHead: [
        {
          title: '车牌号',
          key: 'vehicle_no'
        },
        {
          title: '车牌颜色',
          key: 'plate_color'
        },
        {
          title: '单位名',
          key: 'unit_name'
        },
        {
          title: 'SIM卡号',
          key: 'device_sim'
        },
        {
          title: '终端序列号',
          key: 'device_real_id'
        },
        {
          title: '开户时间',
          key: 'open_time'
        },
        {
          title: '所属行业',
          key: 'trade_desc'
        },
        {
          title: '车牌品牌',
          key: 'brand_desc'
        },
        {
          title: '车辆类型',
          key: 'vehicle_type_desc'
        },
        {
          title: 'VIN',
          key: 'vin'
        }
      ],
      modal1: false,
      pageOptions: {
        totalRecord: 10
      },
      model11: '',
      selectData: [],
      data1: [],
      data2: [],
      param: {}
    }
  },

  mounted () {
    this.param = {
      ids: '114,99,95,92,87,81,78,74,68,65,64,42,41,40,27,24',
      page: 1
    }
    this.getList()
    unit({ size: 1000 }).then(ret => {
      let data = ret.data.results
      data.forEach(item => {
        item.title = item.name
        item.selected = false
      })
      this.data2 = this.$common.toTree(data, 'children', 'id', 'pid')
      console.log(this.data2)
    })
  },
  methods: {
    exportData () {
      exportData(this.param).then(ret => {
        this.$refs.table.exportCsv({
          filename: '车辆基础报表'
        })
      })
    },
    getList () {
      vehicleReport(this.param).then(ret => {
        this.data1 = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    },
    focus () {
      this.$common.treeFind(this.data2, 48, 'id', 'selected', true, 'children')
      console.log(this.data2)
    },
    okAdd () {
      let ids = ''
      this.selectData.forEach(item => {
        ids = ids + item.id + ','
      })
      console.log(ids)
      this.$Message.info('点击确定')
    },
    cancel () {
      this.$Message.info('点击取消')
    },
    pageChange (e) {
      this.param.page = e
      this.getList()
    },
    selectCarsAction () {
      console.log('3333')
      this.modal1 = true
    },
    onCheckChange (data) {
      this.selectData = data
    },
    selects () {
      vehicleSelect(this.param).then(ret => {
        this.data1 = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    }
  }
}
</script>

<style scoped>

</style>
